<!DOCTYPE html>
<html lang='en'>
<head>
    <meta charset='UTF-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>Document</title>
    <script src='https://cdn.staticfile.org/react/16.4.0/umd/react.development.js'></script>
    <script src='https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js'></script>
    <!-- 生产环境中不建议使用 -->
    <script src='https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js'></script>
</head>
<body>
    <div id="test">

    </div>
    <div id='app'>
        
    </div>
    <script type='text/babel'>
        let VitualDOM = <h1>虚拟DOM</h1>
        let RealDOM = document.getElementById('test')

        console.log(VitualDOM,RealDOM)
        /*
            关于虚拟DOM：
                1.本质是Object类型的对象，也就是说 VitualDOM instanceof Object == true
                2.虚拟DOM本身是比真实DOM要“轻”的，因为虚拟DOM是React内部在用，没有像真实DOM中那么多属性
                3.虚拟DOM最终会被转化为真实DOM，呈现在页面上
        */
    </script>
</body>
</html>